import { CommonForm } from '@/pages/OrderModule/common/components/CommonForm';
import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import SubTitle from '@/pages/OrderModule/common/components/SubTitle';
import Typography from '@/pages/OrderModule/common/components/Typography';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Alert, Button, Col, Form, Input, message, Radio, Row, Space } from 'antd';
import OrderStatusLabelValue from '../../components/OrderStatusLabelValue';
import ErrorTypeManageModal from "@/views/components/ErrorTypeManage";
import CommonLoading from '@/components/CommonLoading';
import { useEffect, useState } from 'react';
import { countOrderSum } from '../../utils/checkOrderConfig';
import { updateOrderStatus } from '../../utils/orderStatus';
import Api from '../../service';


function ErrorTypeRadioGroup(props) {
	const { options, ...args } = props;
	return (
		<Radio.Group {...args}>
			<Row>
				{options.map((item) => {
					return (
						<Col style={{ marginTop: 12 }} key={item.id} span={8}>
							<Radio value={item.id}>{item.name}</Radio>
						</Col>
					);
				})}
			</Row>
		</Radio.Group>
	);
}

/** 转异常（请选择异常类型） */
function SetOrderStatusForErrorModal(props) {
	const { item = {}, singleIdForArray, selectKeys, orderList, handleOk, handleCancel } = props;
	const { scene = 'abnormalOrder' } = item;
	const [form] = Form.useForm();
	const [isOk, setIsOk] = useState(false);
	const [loading, setLoading] = useState(false);
	const [errorList, setErrorList] = useState([]);
	const [open, setOpen] = useState(false);
	const [openError, setOpenError]=useState(false);

	useEffect(() => {
		setOpen(true);
		getErrorReason();
	}, [])

	//获取异常原因
	const getErrorReason = async () => {
		const { success, data } = await Api.getErrorReason();
		if (success) {
			setErrorList(data);
		}
	}

	const onOk = () => {
		const formData = form.getFieldsValue();
		if (!formData.errorId) {
			message.info('请选择异常原因');
			return;
		}
		setLoading(true);
		updateOrderStatus(scene, {
			orderIds: singleIdForArray || selectKeys,
			...formData
		}, (val) => {
			setLoading(false);
			if (val) {
				setIsOk(true);
				setOpen(false);
			}
		})
	}

	const onCancel = () => {
		setOpen(false);
	}

	const afterClose = () => {
		if (isOk) {
			handleOk()
		} else {
			handleCancel();
		}
	}

	//已作废订单
	const orderCount = singleIdForArray ? null : countOrderSum(scene, selectKeys, orderList);

	const ErrorTypeManageProps = {
		handleOk() {
			setOpenError(false);
			getErrorReason();
		},
		handleCancel() {
			setOpenError(false);
		}
	}

	return (
		<>
			{openError && <ErrorTypeManageModal {...ErrorTypeManageProps} />}
			<CommonModal
				title={{ title: "转异常（请选择异常类型）" }}
				open={open}
				width="720px"
				afterClose={afterClose}
				onCancel={onCancel}
				footer={
					<Row justify="space-between">
						<Col>
							<Button type="link" onClick={() => setOpenError(true)}>
								<Typography color="#0068FF">
									<ExclamationCircleOutlined />
								</Typography>
								&nbsp;&nbsp;<Typography color="#333">维护自定义异常</Typography>
							</Button>
						</Col>
						<Col>
							<Space>
								<Button size="middle" onClick={onCancel}>
									取消
								</Button>
								<Button size="middle" type="primary" onClick={onOk}>
									确定
								</Button>
							</Space>
						</Col>
					</Row>
				}
			>
				{!singleIdForArray && (<>
					<Alert showIcon message={<Typography as="s1">“待发货”的订单若转异常，有可能会终止仓库的采购发货流程，请谨慎操作！</Typography>} />
					<Row style={{ marginTop: 16, color: '#333' }} gutter={80}>
						<Col>
							<OrderStatusLabelValue label="待审核" value={orderCount[0]} />
						</Col>
						<Col>
							<OrderStatusLabelValue label="异常" type="error" value={orderCount[2]} />
						</Col>
						<Col>
							<OrderStatusLabelValue label="待发货" value={orderCount[1]} />
						</Col>
					</Row>
				</>)}
				
				<SubTitle symbol title="异常原因" as="s2" wrapStyle={{ marginTop: 16 }} />
				<CommonForm
					formProps={{
						form,
					}}
					columns={[
						{
							name: 'errorId',
							slot: (
								<ErrorTypeRadioGroup
									options={errorList}
								/>
							),
						},
						{
							Component: Input,
							name: 'description',
							props: {
								style: {
									marginTop: 24,
								},
								placeholder: '请输入异常描述',
								maxLength: 30,
								showCount: true,
							},
						},
					]}
				></CommonForm>
				<CommonLoading loading={loading} />
			</CommonModal>
		</>
	);
}

export default SetOrderStatusForErrorModal;
